import React, { useState, useEffect } from 'react';
import { Route, HashRouter, Switch } from "react-router-dom";
import LeftHead from './components/LeftHead';
import './App.css';
import NavBar from './components/NavBar'

import Home from './pages/Home'
import About from './pages/About'
import Resume from './pages/Resume'
import Portfolio from './pages/Portfolio'
import Blog from './pages/Blog'
import Contact from './pages/Contact'
import Login from './pages/Login'
import Signup from './pages/Signup'
import CommonContext from './context';

function App() {
  const [ user, setUserName ] = useState('');
  let ctxValue = {
    user,
    setUser(user){
      setUserName(user)
    }
  };
  
  return (
    
    <CommonContext.Provider value={ctxValue}> 
      <div className="page">
        <div className="page-content">
          <LeftHead />
          <div className="content-area">
            <HashRouter>
              <Switch>
                <Route path="/" exact component={Home} />
                <Route path="/about" exact component={About} />
                <Route path="/resume" exact component={Resume} />
                <Route path="/portfolio" exact component={Portfolio} />
                <Route path="/blog" exact component={Blog} />
                <Route path="/contact" exact component={Contact} />
                <Route path="/login" exact component={Login} />
                <Route path="/signup" exact component={Signup} />
              </Switch>
            </HashRouter>
          </div>
        </div>
        <NavBar />
      </div>
    </CommonContext.Provider>
  );
}

export default App;
